<template>
  <h2>GraphRelation 关系图组件</h2>

  <h3>基础用法</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <graph-relation
      style="width: 100%; height: 500px; background-color: #f3f5f7"
      showToolbar
      :data="data"
      :mouseZoomable="false"
      @clickLink="clickLink"
      @clickNode="clickNode"
    ></graph-relation>

    <template #code>
      {{ `
<template>
  <graph-relation
    style="width: 100%; height: 500px; background-color: #f3f5f7"
    showToolbar
    :data="data"
    :mouseZoomable="false"
    @clickLink="clickLink"
    @clickNode="clickNode"
  ></graph-relation>
</template>

<script setup>
const data = {
  id: '1',
  text: '杭州仟金顶信息技术有限公司',
  type: 'root-node',
  children: [
    {
      id: '1-1',
      text: '股东',
      bgColor: '#ccc',
      color: '#fff',
      children: [
        {
          id: '1-1-1',
          text: '企业股东',
          children: [
            {
              id: '1-1-1-1',
              text: '万科物业有限公司',
              invested: '50.00%',
              riskStatus: 'none',
              children: [
                {
                  id: '1-1-1-1-1',
                  text: 'AAAA物业有限公司',
                  invested: '50%',
                  riskStatus: 'exist',
                  children: [
                    {
                      id: '1-1-1-1-1-1',
                      text: '被执行人',
                      type: 'risk-node',
                      riskStatus: 'exist',
                      riskNum: 8,
                      linkable: false,
                    },
                    {
                      id: '1-1-1-1-1-2',
                      text: '失信',
                      type: 'risk-node',
                      riskStatus: 'none',
                      riskNum: 8,
                      linkable: false,
                      children: [
                        {
                          id: '1-1-1-1-1-2-1',
                          text: '建筑工程施工合同纠纷',
                          type: 'risk-node',
                          riskStatus: 'none',
                          riskNum: 8,
                        },
                        {
                          id: '1-1-1-1-1-2-2',
                          text: '买卖合同纠纷',
                          type: 'risk-node',
                          riskNum: 8,
                          color: 'green',
                          bgColor: '#ccc',
                        },
                        {
                          id: '1-1-1-1-1-2-3',
                          text: '建筑工程施工合同纠纷',
                          type: 'default-node',
                          riskStatus: 'none',
                        },
                      ],
                    },
                  ],
                },
              ],
            },
            {
              id: '1-1-1-2',
              text: '显示更多',
              type: 'more-node',
              hiddenChildren: [
                {
                  id: '1-1-1-3',
                  text: '万科物业有限公司',
                },
                {
                  id: '1-1-1-4',
                  text: '万科物业有限公司',
                },
                {
                  id: '1-1-1-5',
                  text: '万科物业有限公司',
                },
                {
                  id: '1-1-1-6',
                  text: '万科物业有限公司',
                },
              ],
            },
          ],
        },
        {
          id: '1-1-2',
          text: '个人股东',
        },
      ],
    },
    {
      id: '1-2',
      text: '对外投资',
    },
    {
      id: '1-3',
      text: '分支机构',
    },
  ],
}

function clickLink(model) {
  window.alert(JSON.stringify(model))
}

function clickNode(model) {
  console.info('clickNode', model)
}
</script>
      ` }}
    </template>
  </code-demo>

  <h3>Attributes</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>Data Option</h3>
  <table-info type="param" :data="paramTable"></table-info>
  <h3>Events</h3>
  <table-info type="event" :data="eventTable"></table-info>
  <h3>Exposes</h3>
  <table-info type="expose" :data="exposeTable"></table-info>
</template>

<script setup>
import {
  clickLink,
  clickNode,
  propsTable,
  paramTable,
  exposeTable,
  eventTable,
} from './config'
import data from './relation-data'
</script>
